<template>
<div id="wrapper">
  <ul>

    <li v-for="(obj,index) in tips" @click="show(obj)" :class="obj.isShow">
      <!--<transition name="fade">-->
        <!--<div>-->
          <div class="top">
            <div class="top-title">
              <img :src="obj.headImg" alt="" class="headImg">
              <span>{{obj.nick}}</span>
            </div>
            <span class="date">{{obj.date}}</span>
          </div>
          <div class="text">
            {{obj.content}}
          </div>
          <div class="disImgs">
        <span class="disImgs-span" v-for="disImg in obj.imgs">
          <img :src="disImg" alt="">
        </span>
          </div>
      <p class="dateBefore">{{obj.dateBefore}}小时前</p>
          <div class="bottom">
            <div class="bottom-div"><span><img src="../../assets/shortProduct/allTips/zan.png" alt="" class="bottom-img"> {{obj.zanNum}}</span></div>
            <div><span><img src="../../assets/shortProduct/allTips/comment.png" alt="" class="bottom-img"> {{obj.messageNum}}</span></div>
            <div><span><img src="../../assets/shortProduct/allTips/share.png" alt="" class="bottom-img"> {{obj.shareNum}}</span></div>
          </div>
          <div class="tian-f"></div>
        <!--</div>-->
      <!--</transition>-->
    </li>

  </ul>
</div>
</template>
<script>
  export default {
    data() {
      return{
        tips:[{
          headImg:require('../../assets/shortProduct/allTips/headImg.png'),
          nick: '苗阳宝宝',
          date: '2017-6-28',
          content: '这件商品真的很适合,而且价格还不贵',
          imgs:[require('../../img/disImg.png'),require('../../img/disImg.png'),require('../../img/disImg.png')],
          zanNum: 1,
          messageNum: 10,
          shareNum: 26,
          dateBefore: 8,
          isShow: 'hidden'
        },{
          headImg:require('../../assets/shortProduct/allTips/headImg.png'),
          nick: '苗阳宝宝',
          date: '2017-6-28',
          content: '这件商品真的很适合,而且价格还不贵',
          imgs:[require('../../img/disImg.png'),require('../../img/disImg.png'),require('../../img/disImg.png')],
          zanNum: 10,
          messageNum: 12,
          shareNum: 16,
          dateBefore: 8,
          isShow: 'hidden'
        },{
          headImg:require('../../assets/shortProduct/allTips/headImg.png'),
          nick: '苗阳宝宝',
          date: '2017-6-28',
          content: '这件商品真的很适合,而且价格还不贵',
          imgs:[require('../../img/disImg.png'),require('../../img/disImg.png'),require('../../img/disImg.png')],
          zanNum: 11,
          messageNum: 101,
          shareNum: 26,
          dateBefore: 8,
          isShow: 'hidden'
        }],
        isClass: false

      }
    },
    methods:{
      show(obj){
        this.isClass = !this.isClass
        if (this.isClass) {
          obj.isShow = 'show'
        } else {
          obj.isShow = 'hidden'
        }
//        const li = document.getElementsByTagName('li')[index];
//        console.log(li.getAttribute('class'));
//        li.setAttribute('class','show')
//        li.style.overflow = 'auto';
//        li.style.height = 'auto'
////        console.log(li.style.overflow);
//        console.log(li.className);
      }
    }
  }
</script>
<style scoped>
  #wrapper{
    width: 100%;
  }
  /*控制展开和收起*/
.show{
  width: calc(100% - 2rem);
  /*height: 27.1rem;*/
  /*overflow: auto;*/
  margin: 0 auto;
  z-index: 1000;
  transition: all 3s;
}
  .hidden{
    width: calc(100% - 2rem);
    height: 15rem;
    overflow: hidden;
    margin: 0 auto;
  }
  .bottom{
    width: 100%;
    height: 4rem;
    display: flex;
    border-top: 1px solid #cccccc;
  }
  .bottom div{
    margin-top: 1rem;
    display: inline-block;
    height: 2rem;
    flex: 1;
    text-align: center;
  }
  .bottom div>span img{
    width: 1.2rem;
    vertical-align: middle;
  }
  .bottom div>span{
    display: inline-block;
    font-size: 1.2rem;
    margin-top: 0.3rem;
    color: #808080;
    vertical-align: middle;
  }
  .bottom div:nth-child(2){
    border-right: 1px solid #cccccc;
    border-left: 1px solid #cccccc;
  }
  /*头像*/
  .top{
    position: relative;
  }
  .top-title{
    display: inline-block;
    vertical-align: middle;
    margin-top: 1rem;
  }
  .headImg{
    width: 4rem;
    border-radius: 50%;
    vertical-align: middle;
  }
  .top-title span{
    font-size: 1.4rem;
    color: #4d4d4d;
    vertical-align: middle;
  }
  .date{
    display: inline-block;
    font-size: 1.2rem;
    color: #808080;
    position: absolute;
    top:2rem;
    right: 0;
  }
  .text{
    font-size: 1.2rem;
    color: #808080;
  }
  .disImgs{
    padding-bottom: 1rem;
    display: flex;
    justify-content: space-between;
  }
  .disImgs-span{
    display: inline-block;
    width: 32%;
    /*flex: 1;*/
    border: 1px solid #cccccc;
    font-size: 0;
  }
  .disImgs-span img{
    width:100%;
  }
  /*灰色*/
  .tian-f{
    width: 100%;
    height: 1rem;
    background-color: rgb(242,242,242);
  }
  .dateBefore{
    font-size: 1.2rem;
    color: #808080;
  }
  /*动画*/
  .fade-leave-active,.fade-enter-active{
    transition:  all 1s ease;
  }
  .fade-leave-active,.fade-enter{
    height:27.1rem !important;
  }
  .fade-leave,.fade-enter-active{
    height: 15rem;
  }
</style>
